
@import "../_common.css";


#root {
  @media only screen and (min-width: 1000px) {
    display: grid;
    justify-content: center;
  }
}

#App {
  margin: 0px;
  width: 1000px;
  margin-top: 40px;

  .labelWithTooltip {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    grid-column-gap: 10px;
  }

  & > .section {
    background-color: var(--fg-color);
    padding: 20px;
    margin-bottom: 40px;
    box-shadow: var(--card-shadow);

    &.promo {
      display: inline-block;
      cursor: pointer;

      &:hover {
        opacity: 0.9;
      }

      .a {
        color: var(--link-color);
        &:hover {
          text-decoration: underline;
        }
        font-weight: bold;
        font-size: 1.2em;

        img {
          width: 1.3em;
          vertical-align: middle;
        }
      }

      svg {
        margin-left: 10px;

        & * {
          pointer-events: none;
        }
      }
    }

    & > h2 {
      margin-top: 0;
    }

    & > .dict {
      display: grid;
      grid-row-gap: 15px;
      margin-bottom: 25px;

      & > div {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-column-gap: 10px;  
        align-items: center;

        & > .toggleMode {
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: max-content;
          grid-column-gap: 10px;
          
          & > .divider {
            width: 2px;
            background-color: var(--icon-vibrant-color);
            transform: rotateZ(20deg) scaleY(1.3);
          }
        }
      }
    }
  }
}



svg.tr85 { transform: scale(0.85) }
svg.tr90 { transform: scale(0.9) }
svg.tr95 { transform: scale(0.95) }
svg.tr103 { transform: scale(1.03) }
svg.tr105 { transform: scale(1.05) }
svg.tr110 { transform: scale(1.1) }
svg.tr115 { transform: scale(1.15) }
svg.tr120 { transform: scale(1.2) }
svg.tr125 { transform: scale(1.25) }
svg.tr130 { transform: scale(1.3) }
svg.tr140 { transform: scale(1.4) }
